MENU MAKER
By Qwenta
19 FÉVRIER 2024
L'entreprise Qwenta, leader historique de l'impression de supports, souhaite réaliser
un outil en ligne qui permettra à ses clients restaurateurs, de publier et de choisir
par eux-mêmes la mise en forme de leurs menus.
Qwenta fait appel à Webgencia une nouvelle fois, pour organiser la gestion du
projet de développement du site. Cette présentation à pour but de montrer
précisément toutes les étapes du projet.
1. La première étape est celle des spécifications fonctionnelles, établies par
Soufiane
2. La deuxième étape est une veille technologique, assurée par moi-même
3. La troisième étape consistait à choisir les technologies à utiliser pour ce projet
4. La dernière étape consistait à mettre au point un outil de gestion du projet
Première étape : les spécifications fonctionnelles
Soufiane, le Product Owner a défini les spécifications fonctionnelles. Il a cartographié le projet
en étudiant les besoins de Qwenta, en créant des profils utilisateurs et en imaginant des
scénarios. Il a synthétisé toutes ces informations dans un document détaillé. Il a aussi créé le
tableau des User Stories, et demandé à l’UI Designer de créer une maquette du site.
Première étape : les spécifications fonctionnelles
Première étape : les spécifications fonctionnelles
Tableau des User Stories Maquette du site
Deuxième étape : la veille technologique
En possession de tous ces documents, l’étape
suivante était de choisir les bons outils; ceux qui
allaient nous permettre de réaliser le travail dans
les meilleures conditions.
J’ai donc mis en place une veille automatisée
consistant à surveiller en permanence tout ce qui
est étroitement lié au projet, sur Internet : Articles
de presse, blogs, newsletters, flux RSS, réseaux
sociaux, etc…
Le choix des technologies est vaste. Il existe une
multitude de langages informatiques, de
Frameworks, de librairies, de bases de données,
d’APIs et d’hébergeurs.
J’ai dû ordonner et trier mes recherches, pour au
final, ne conserver que les technologies qui me
semblait les plus pertinentes. Les critères de choix
étaient la compatibilité avec le projet, la notoriété,
la facilité d’utilisation, le support technique, les
tendances actuelles.
Finalement, j’ai réussi à trouver un bon compromis
dans le choix des technologies à utiliser pour ce
projet.
Mon outil de veille préféré est WAKELET. J’y ai rassemblé toutes les
informations que je trouvais utiles pour le projet, je les ai classé
par rubriques, et je les ai mise à disposition de toute l’équipe.
Capture d’écran de WAKELET
Troisième étape : les technologies utilisées
HTML5, CSS3, JAVASCRIPT : Les langages de base pour créer une page web
REACT : Framework JavaScript pour créer des interfaces utilisateurs dynamiques
REACT MODAL : Cette librairie permet de créer simplement des modales performantes
NODE.JS : Framework Backend, qui permet la communication avec la partie Frontend.
EXPRESS.JS : Le Framework backend qui permet une gestion simple des routes de l’API
PASSPORT.JS : un middleware d’authentification pour Node.js et Express
NODEMAILER : un module pour Node.js permettant l’envoi d’e-mails en toute simplicité
REACT HOOK FORM : bibliothèque qui permet de créer facilement un formulaire
MATERIAL UI : Bibliothèque qui implémente le Material Design de Google.(Fonts et couleurs)
JSPDF : bibliothèque open-source pour générer des fichiers PDF (en JavaScript côté client)
REACT IMAGE FILE RESIZER : module React qui permet de redimensionner les images locales
MONGODB : une base de données NoSQL qui permet des modifications en temps réel
API de Deliveroo
API d’ Instagram
Troisième étape : les technologies utilisées
Les spécifications techniques permettent de montrer les
technologies que l’on va utiliser pour chaque fonctionnalité
Landing Page:
L’utilisateur veut comprendre
l’utilité de cette application.
Il y a 4 parties :
- Une barre de navigation
- Un lien pour se connecter
- Personnaliser son menu
- Aide pour créer son menu
On va utiliser:
HTML5, CSS3
JAVASCRIPT
REACT
Dashboard : L'utilisateur souhaite créer, diffuser et
imprimer des menus, et pouvoir lire les 3 derniers articles du
blog de Qwenta. Ici, il y a 3 parties :
- Une barre de navigation, à gauche, avec des liens
- 3 encarts (Créer, diffuser, imprimer)
- 3 articles de blog
On va utiliser : HTML5, CSS3, JAVASCRIPT, REACT
Connexion :
L’utilisateur veut se connecter, ou créer un compte
Côté Backend:
- Créer la base de données pour stocker l’adresse mail
- Créer les routes de l’API
- Créer un composant d’envoi automatique de mail
- Créer les mesures de sécurité (authentification)
On va utiliser :
NODE, MONGODB, EXPRESS, NODEMAILER, PASSPORT
Côté Frontend:
- Créer une modale avec 3 volets successifs
- Créer un formulaire pour récupérer l’adresse mail
- Utiliser un composant d’envoi automatique de mail
- Utiliser l’API pour enregistrer l’adresse mail
- Gérer la connexion ou le refus de connexion
- Créer un lien BESOIN D’AIDE
On va utiliser :
HTML5, CSS3, JAVASCRIPT, REACT, REACT MODAL,
NODEMAILER
Catégories de plats : Création d’une nouvelle catégorie,
ou sélection d’une catégorie déjà crée, dans une modale.
Dans le Backend :
- Mettre en place la base de données MENU
- Mettre en place les routes de l’API
On va utiliser: NODE, EXPRESS, MONGODB
Dans le Frontend :
- Créer l’interface de création de menu
- Créer une modale spécifique
- Utiliser l’API pour enregistrer les catégories
On va utiliser : HTML5, CSS3, JAVASCRIPT, REACT MODAL
Troisième étape : les technologies utilisées
Les spécifications techniques permettent de montrer les
technologies que l’on va utiliser pour chaque fonctionnalité
Création de plat: En tant que restaurateur, je veux pouvoir
ajouter un plat / des plats dans mon menu.
- Création d’une modale avec un formulaire
- 4 champs (Photo, nom, prix, description)
On va utiliser: HTML5, CSS3, JAVASCRIPT, REACT- MODAL,
REACT HOOK FORM, REACT
Personnalisation du style de menu : En tant que
restaurateur, je veux pouvoir personnaliser le style du menu.
- Sélectionner une typographie
- Sélectionner une couleur de texte
On va utiliser :
HTML5, CSS3, JAVASCRIPT, REACT, MATERIAL UI,
Troisième étape : les technologies utilisées
Les spécifications techniques permettent de montrer les
technologies que l’on va utiliser pour chaque fonctionnalité
Troisième étape : les technologies utilisées
Les spécifications techniques permettent de montrer les
technologies que l’on va utiliser pour chaque fonctionnalité
Exportation en PDF :
En tant que restaurateur, je veux exporter mon menu
en PDF, en un clic.
- Créer un fichier PDF
On va utiliser : REACT, JSPDF
Diffusion sur Deliveroo :
En tant que restaurateur, je veux pouvoir exporter
mon menu en un clic vers l'application Deliveroo.
- Création d’un compte développeur Deliveroo
- Installation de l’API Deliveroo
On va utiliser: REACT, API DELIVEROO
Partage sur Instagram : En tant que restaurateur, je
veux pouvoir partager mon menu sur Instagram
facilement.
- Création d’ une fonctionnalité qui génère des images
carrées, au format Instagram
-Mise en place de l’API d'Instagram
On va utiliser: API INSTAGRAM
REACT, REACT IMAGE FILE RESIZER
Troisième étape : les technologies utilisées
Les spécifications techniques permettent de montrer les
technologies que l’on va utiliser pour chaque fonctionnalité
Accès aux menus précédents :
En tant que restaurateur, je dois pouvoir avoir accès à une
vue regroupant les menus créés précédemment.
- Affichage des menus créés précédemment
- Affichage des menus en cours de création
-Possibilité de modifier un menu
-Possibilité de supprimer un menu
- Possibilité de créer un nouveau menu
- Données sauvegardées dans la base de donnée déjà crée
On va utiliser :
HTML5, CSS3, JAVASCRIPT, REACT, API REST
Troisième étape : les technologies utilisées
Ces deux schémas montrent le fonctionnement de la base
de données, et la façon dont les données seront conservées.
RESTAURATEURS
restaurateur.id
restaurateur.mail1
restaurateur.mail2
etc…
BRANDING
restaurateur.id
logo.id
couleur.id
font.id
etc…
PLATS
restaurateur.id
plat.id
plat.nom
plat.photo
plat.prix
plat.description
CATEGORIES
restaurateur.id
catégorie.id
catégorie.nom
MENUS
restaurateur.id
menu.id
catégorie.id
plat.id
date création
Base de données
EXPRESS.JS
NODE.JS
REACT.JS
Site web
MONGO.DB
Base de données
La liaison entre l’interface utilisateur et la
base de données sera assurée par la
STACK MERN.
MERN est un acronyme de
- MONGODB
- EXPRESS.JS
- REACT
- NODE.JS
MongoDB stocke les données
Express.js simplifie la création de serveur
Node.js pour l’exécution côté serveur
React pour l’interface utilisateur
La Stack MERN offre une compatibilité
complète entre ses composants, ce qui
facilite le développement web. On utilise
un langage de programmation unique
(JavaScript) à la fois côté client et côté
serveur, ce qui réduit la complexité et
accélère le processus de développement.
Il faudra créer une API REST en utilisant Node et Express.
Une API (Application Programming Interface ) est un
ensemble de services offert par un logiciel à d'autres
logiciels et qui permet de manipuler facilement et
rapidement des bases de données.
Quatrième étape : la gestion du projet
•Un Chef de projet chez Qwenta (John )
•Un Product Owner ( Soufiane ) qui représente les
utilisateurs finaux
•Un Scrum Master ( Moi ) qui aide et protège
l’équipe des perturbations extérieures
•Un UI Designer
•Un développeur Front-end
•Un développeur Full-stack
Le développeur Full-stack devra s’occuper en priorité
de la partie Back-end. Le travail Back-end terminé, il
s’occupera de la partie Front-end.
L’UI Designer devra s’occuper de créer les
maquettes inexistantes, avant que les développeurs
puissent effectuer leur travail.
Le Scrum Master devra valider chaque fonctionnalité
avant qu’elle soit considérée comme terminée.
DURÉE DU PROJET
Concernant le projet Menu Maker, il faut envisager
une durée de 8 semaines. Cela comprend la période
de développement, mais aussi une période de tests
et de mise en production.
John,
Qwenta
Soufiane,
Webgencia
Bernard,
Webgencia
Composition de l’équipe
Quatrième étape : la gestion du projet
L’outil de gestion de projet choisi est TRELLO
Le tableau Kanban créé sur TRELLO
permet d’organiser le travail de l’équipe et de
travailler avec fluidité. Il y a 4 listes :
- A faire : Toutes les cartes y sont créées.
- En cours : Le travail commence quand on
fait glisser une carte ici. Chaque membre de
l’équipe s’attribue la carte sur laquelle il
travaille.
- Test : On fait glisser une carte ici lorsque la
fonctionnalité est créée. Les tests peuvent
commencer.
- Terminé : On fait glisser une carte ici lorsque
le travail est terminé et testé. Le Scrum
Master sera chargé de la validation des
fonctionnalités.
Chaque carte comporte le nom de la tâche à
effectuer, la priorité, la difficulté, la durée
prévue, et les dates de début et de fin. On va
y ajouter le nom de celui qui va s’attribuer
cette tâche. Le nombre de cartes doit rester
équilibré dans chaque liste, pour éviter les
engorgements.
Quatrième étape : la gestion du projet
Le Kanban créé permet de travailler selon la méthode agile.
La durée d’un Sprint sera d’une semaine.
Les réunions internes, au sein de Webgencia :
Backlog Refinement : Réunion hebdomadaire de l'équipe durant
laquelle on découpe les User Stories qui vont être traitées lors du
prochain sprint. (Durée 60 min.). Il est suivi du Planning Poker,
pour évaluer la complexité des tâches (Durée 30 min.)
Sprint planning : Réunion hebdomadaire durant laquelle l'équipe
détermine les objectifs du sprint qui démarre (Durée 60 min.)
Sprint Rétrospective : Réunion hebdomadaire de l'équipe qui
permet d’évaluer le travail réalisé, de vérifier l'avancée du projet
et de chercher le moyen d’améliorer le sprint suivant (Durée 45
min.)
En plus de ces réunions hebdomadaires, il y a aussi Le daily :
C’est une réunion quotidienne obligatoire, en présentiel, des
développeurs et du Scrum Master. On reste debout pendant cette
réunion. (Durée 15 min.) Trois points sont abordés : Le travail
accompli la veille, les tâches qui seront traitées aujourd’hui et les
éventuels blocages. Si un développeur rencontre un point de
blocage, le Scrum Master lui vient en aide après la réunion, pour
que la réunion ne s’éternise pas.
Quatrième étape : la gestion du projet
La communication avec le client :
La communication devra rester constante avec John, le
chef de projet, jusqu’à la validation finale.
Des Sprint Review hebdomadaires permettent de
rebondir sur des sujets “frais”. Durant ces réunions
(Durée 60 minutes), les résultats du Sprint vous seront
présentés par l’équipe au complet. Vous pourrez les
étudier, les commenter, et éventuellement ajouter de
nouvelles fonctionnalités. Les modifications seront alors
ajoutées au Backlog, et traitées dans le Sprint suivant
(Réunion en présentiel ou sur Meet, selon vos
disponibilités).
Une réunion exceptionnelle tous les 15 jours aura lieu
entre le chef de projet, le Product Owner et le Scrum
Master, pour étudier l’évolution du projet.
Maintenance et mises à jour : Prise en charge des
problèmes lors du lancement du site, maintenance de
la base de données, sauvegarde régulière du site,
mises à jour de sécurité régulières, modification des
fonctionnalités.
Nom du domaine: Il faut prévoir un sous-domaine
de Qwenta, en cours de validation actuellement.
( MenuMaker.Qwenta.com )
Nom de l’hébergement: https://hostinger.com C'est
un hébergeur ayant fait ses preuves, assurant une
rapidité et une sécurité maximale. Les tarifs sont
corrects (Entre 12 et 20 euros par mois, selon
l'option choisie).
Adresses e-mail: On pourrait envisager
supportMenuMaker@qwenta.com
Sécurité :
Utilisation du protocole HTTPS
Cryptage des données dans la base de données
Système d'authentification renforcé avec Passport.js
et E-mail Magic Link, pour éviter un piratage de
compte utilisateur.
Sécurisation des validations de formulaires
Sécurité supplémentaire fournie par l'hébergeur
Hostinger ( Certificat SSL, protection DdoS )
Conclusion
Je vous remercie de l’attention que vous avez porté à cette présentation.
Les méthodes agiles, et la solution technique retenue sont sans doute les plus adaptées pour ce projet.
La communication sera un des points les plus importants.
Elle permettra d’améliorer notre collaboration et de créer un site web performant.
